<template>
  <div id="MultipleDepartments">
    <el-cascader :options="companySection" :props="defaultProps" v-model="departmentArr" placeholder="部门(多选)" clearable collapse-tags></el-cascader>
  </div>
</template>
<script>
// import { mapState } from 'vuex';
export default {
  name: 'MultipleDepartments',
  props: {
    subId: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      defaultProps: {
        children: 'childrens',
        label: 'name',
        value: 'id',
        multiple: true
      },

      departmentArr: [], // 部门
    };
  },
  computed: {
    companySection() {
      if (this.subId?.length) {
        const result = this.$store.state.common.companySection.find(e => e.id == this.subId);
        if (result) {
          return result.childrens;
        }
        return [];
      } else {
        return this.$store.state.common.companySection;
      }
    }
  },
  methods: {

    /**
     * @description 获取选中部门id数组
     */
    getDepartments() {
      // console.log('部门数组', this.departmentArr);
      if (this.departmentArr.length != 0) {
        let arr = [];
        this.departmentArr.map(item => {
          if (this.subId?.length) {
            // 已选定子公司，直接拼接数组
            arr = [...arr, ...item];
          } else {
            // 未选定子公司
            item.map((i, index) => {
              if (index != 0) {
                arr.push(i);
              }
            });
          }

        });
        console.log('arr', arr);
        return arr;
      } else {
        return [];
      }

    },
  }
};
</script>
<style lang="less" scoped>
// #MultipleDepartments {
// }
</style>